<template>
	<view class="register">

		<view class="content">
			<!-- 头部logo -->
			<view class="imgUnload">

				<robby-image-upload :server-url="serverUrl" fileKeyName="file" :form-data="formData"
					:value="info.avatarurl" @delete="deleteImage" @add="addImage" :limit="limitNumber">
				</robby-image-upload>
			</view>
			<!-- 主体 -->
			<view class="main">
				<wInput v-model="info.username" type="text" maxlength="11" placeholder="用户名"></wInput>
				<wInput v-model="info.phone" type="text" maxlength="11" placeholder="手机号"></wInput>
				<wInput v-model="info.password" type="password" maxlength="11" placeholder="登录密码" isShowPass></wInput>

			</view>

			<wButton class="wbutton" text="注 册" @click="registerBtn"></wButton>


		</view>
	</view>
</template>

<script>
	let _this;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'

	export default {
		data() {
			return {
				//注册信息
				info: {
					avatarurl: [],
					username: '',
					phone: '', // 用户/电话
					password: '' //密码
				},
				//图片上传
				limitNumber: 1,
				serverUrl: 'http://172.17.26.211:3334/uploadFile'
			}
		},
		components: {
			wInput,
			wButton,
			robbyImageUpload
		},
		mounted() {
			_this = this;
		},
		methods: {
			//上传头像
			addImage(e) {
				const { data } = JSON.parse(e.allImages[e.allImages.length - 1]);
				this.info.avatarurl.push(data)
				console.log(this.info.avatarurl);
			},
			//注册按钮
			async registerBtn() {
				uni.login({
					provider: 'weixin',
					success: async (loginRes) => {
						
						const { data: res } = await this.$http({
							url: '/user/addwxuser',
							method: 'post',
							data: {
								avatarurl: this.info.avatarurl[0],
								code:loginRes.code,
								password:this.info.password,
								phone:this.info.phone,
								username:this.info.username
							}
						})
						
						if(res.code!=200) return
						uni.navigateBack();
					},
				})
			}
		},
		mounted() {

		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");

	.imgUnload {
		display: flex;
		justify-content: center;
	}
</style>
